<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=”Content-type” name=”viewport”
	content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=no,
	width=device-width”>
<title>投票</title>
<script src="http://localhost:8080/vote/js/jquery-1.12.4.js"></script>
<script type="text/javascript">
	//画图VS
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		canvas.width = 200;
		canvas.height = 200;
		var context = canvas.getContext('2d');
		context.font = "bold 100px Arial red";
		context.fillStyle = "red";
		context.fillText("VS", 40, 100)
	}
	//点击投票
	function vote1() {
		var btn1 = document.getElementById("button1");
		btn1.style.color = "red";
		btn1.style.backgroundColor = "cyan"
		alert("投票成功");
	}
	function vote2() {
		var btn2 = document.getElementById("button2");
		btn2.style.color = "red";
		btn2.style.backgroundColor = "cyan"
		alert("投票成功");
	}
</script>
<style type="text/css">
body {
	background: url("http://localhost:8080/vote/images/timg.jpg");
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.bor1 {
	height: 500px;
	width: 360px;
	float: left;
	margin-top: 8%;
	margin-left: 3%;
}

.bor3 {
	height: 360px;
	width: 360px;
	border: 1px solid rgb(240, 6, 6);
	border-radius: 50%;
}

.bor2 {
	height: 500px;
	width: 360px;
	float: right;
	margin-top: 180px;
	margin-right: 10%;
}

.canvas {
	width: 200px;
	height: 200px;
	margin-top: 70%;
	float: left;
}

img {
	height: 360px;
	width: 360px;
	border: 1px solid rgb(240, 6, 6);
	border-radius: 50%;
}

input {
	border: 0px;
}
</style>
</head>
<body>
	<div id="usercode" display="none"></div>
	<div id="rid" display="none"></div>
	<div class="bor1">
		<div id="sid1" display="none"></div>
		<div class="bor3">
			<img id="img" src="http://localhost:8080/vote/images/tou.jpg">
		</div>
		<inupt id="input1"
			style="width: 200px; height: 50px; text-align: center; margin-top: 20px;margin-right: auto;margin-left: auto; background-color:white; color:black; display: block;line-height:40px;font-size:30px;"
			type="text" value="姓名"></inupt>
		<div class="bor4" style="padding-left: 100px; padding-top: 20px;">
			<input type="button" id="button1" value="投票"
				style="width: 160px; height: 60px; line-height: 30px; font-size: 20px; text-align: center; background-color: greenyellow;" />
		</div>
	</div>
	<div class="canvas">
		<canvas id="canvas" width="200px" height="200px"
			style="border: 0px solid"></canvas>
	</div>
	<div class="bor2">
		<div id="sid2" display="none"></div>
		<div class="bor3">
			<img id="img" src="http://localhost:8080/vote/images/tou.jpg">
		</div>
		<inupt id="input2"
			style="width: 200px; height: 50px; text-align:  center; margin-top: 20px;margin-right: auto;margin-left: auto; background-color:white; color:black; display: block;line-height:40px;font-size:30px;"
			type="text" value="姓名"></inupt>
		<div class="bor4" style="padding-left: 100px; padding-top: 20px;">
			<input type="button" id="button2" value="投票"
				style="width: 160px; height: 60px; line-height: 30px; font-size: 20px; text-align: center; background-color: greenyellow;"/《
		
		</div>
	</div>

	<script>
		$(function() {
			
			
			
			$.ajax({
				url : "../vote/SV",
				type : "post",
				dataType : "json",
				success : function(res) {
					var t = eval(res);
					console.log("rid:" + t.rid);
					console.log(t.sid1);
					console.log(t.SI1);
					console.log(t.SN1);
					console.log(t.sid2);
					console.log(t.SI2);
					console.log(t.SN2);
					$("#rid").text(t.rid);
					$(".bor1>#sid1").text(t.sid1);
					$(".bor1>.bor3>img").attr("src",
							"http://localhost:8080/vote/" + t.SI1);
					$(".bor2>#sid2").text(t.sid2);
					$(".bor2>.bor3>img").attr("src",
							"http://localhost:8080/vote/" + t.SI2);
					$("#input1").text(t.sid1 + "." + t.SN1);
					$("#input2").text(t.sid2 + "." + t.SN2);
					
					
				},
				error : function() {
					alert("error");
				}

			})

		})
		$(function() {
			$("#button1").on("click", function() {
				alert("btn1");
				var usercode = $("#usercode").text();
				var rid = $("#rid").text();
				var sid = $("#sid1").text();
				console.log(usercode);
				console.log(rid);
				console.log(sid);
				$.ajax({
					url : '../vote/voting',
					type : 'post',
					data : {
						'usercode' : usercode,
						'rid' : rid,
						'sid' : sid
					},
					dataType : 'json',
					success : function(res) {
						if (res.msg == "voted") {
							alert("你已经为此场比赛投过票了");
						} else{
							alert("投票成功");
						}
					},
					error : function() {
						alert("---投票失败----");
					}
				})
			})
			$("#button2").on("click", function() {
				alert("btn2");
				var usercode = $("#usercode").text();
				var rid = $("#rid").text();
				var sid = $("#sid2").text();
				console.log(usercode);
				console.log(rid);
				console.log(sid);
				$.ajax({
					url : '../vote/voting',
					type : 'post',
					data : {
						'usercode' : usercode,
						'rid': rid,
						'sid' : sid
					},
					dataType : 'json',
					success : function(res) {
						if (res.msg== "voted") {
							alert("你已经为此场比赛投过票了");
						} else{
							alert("投票成功");
						}
					},
					error : function() {
						alert("---投票失败----");
					}
				})
			})

		})
	</script>

</body>

</html>